<template>
  <div class="home">
    <div class="liyic">
      <div class="left">
        <img src="@/assets/needle-ab.png"
             class="zhizhen"
             :class="{zhen_active:!isBtnShow}"
             alt="">
        <img src="@/assets/cipan.png"
             class="cipan"
             alt="">
        <img :src="MusicDetail.al.picUrl"
             :class="{imges_active:!isBtnShow ,imges_paused:isBtnShow}"
             class="imges"
             alt="">
      </div>
      <div class="right">
        <h1>{{ MusicDetail.name }}</h1>
        <div class="pro">
          <span style="width:90px"
                v-for="ar in MusicDetail.ar"
                :key="ar.id">歌手&#8197;:&#8197;{{ ar.name }}</span>
          <span>专辑&#8197;:&#8197;{{ MusicDetail.al.name }}</span>
        </div>
        <div class="music-content"
             ref="musicLyric">
          <p v-for=" (item,index) in lyric"
             :key="index"
             :class="{active:(currentTime *1000>=item.time && currentTime *1000<item.pre)}">
            {{ item.lrc }}
          </p>
        </div>
      </div>
    </div>
    <div class="comment">
      <comment :type="0"
               :id="id"></comment>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import comment from '@/components/comment/comment'
export default {
  data () {
    return {
      id: ''
    }
  },
  props: ['MusicDetail', 'isBtnShow', 'Lyrics'],
  components: { comment },
  computed: {
    ...mapState({
      currentTime: (state) => {
        return state.playlist.currentTime;
      },
      musicId: (state) => {
        return state.playlist.musicId
      },
      playlist: (state) => {
        return state.playlist.playlist;
      },
      playlistIndex: (state) => {
        return state.playlist.playlistIndex;
      },
    }),
    lyric () {
      let arr
      if (this.Lyrics.lyric) {
        arr = this.Lyrics.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
          let min = item.slice(1, 3)
          let sec = item.slice(4, 6)
          let mill = item.slice(7, 10)
          let lrc = item.slice(11, item.length)
          let time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9)
            lrc = item.slice(10, item.length)
            time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
          }
          return { min, sec, mill, lrc, time }
        })
      }
      if (arr) {
        arr.forEach((item, i) => {
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            item.pre = 100000
          } else {
            item.pre = arr[i + 1].time
          }
        });
      }
      return arr
    },
  },
  methods: {
    ...mapMutations(['updatedisBtnShow', 'updatedCurrentTime', 'updatedPlaylistIndex', 'updatedDuration']),
  },
  watch: {
    currentTime () {
      let p = document.querySelector("p.active")
      if (p) {
        if (p.offsetTop > 240) {
          this.$refs.musicLyric.scrollTop = p.offsetTop - 240
        }
      }
    },
    // 监听id
    musicId: {
      immediate: true,
      handler (newvalue, oldvalue) {
        if (newvalue !== oldvalue && newvalue !== 'undefined' && oldvalue !== 'undefined') {
          this.id = newvalue
        } else {
          this.id = this.playlist[this.playlistIndex].id
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.home {
  .liyic {
    width: 100%;
    margin: 0 auto;
    padding: 0 20%;
    display: flex;
    .left {
      position: relative;
      float: left;
      height: 440px;
      width: 50%;
      .zhizhen {
        position: absolute;
        top: 5px;
        margin-left: 175px;
        width: 100px;
        height: 140px;
        border-radius: 0;
        transform-origin: 0 0;
        transform: rotate(-25deg);
        z-index: 2;
      }
      .zhen_active {
        transform: rotate(5deg);
      }
      .cipan {
        position: absolute;
        top: 95px;
        left: 40px;
        width: 300px;
        height: 300px;
        border-radius: 150px;
      }
      .imges {
        width: 188px;
        height: 188px;
        border-radius: 94px;
        position: absolute;
        top: 153px;
        left: 97px;
        animation: rotate_cipan 30s linear infinite;
      }
      .imges_active {
        animation-play-state: running;
      }
      .imges_paused {
        animation-play-state: paused;
      }
      @keyframes rotate_cipan {
        from {
          transform: rotate(0);
        }

        to {
          transform: rotate(360deg);
        }
      }
    }
    .right {
      width: 50%;
      position: relative;
      z-index: 2;
      h1 {
        width: 330px;
        font-weight: normal;
        padding-left: 5px;
      }
      .pro {
        padding-left: 5px;
        width: 360px;
        white-space: nowrap; /*不换行强制文本在一行显示*/
        overflow: hidden; /*超出盒子宽度部分文字被隐藏*/
        text-overflow: ellipsis; /*当文本溢出包含元素时发生的事情 ellipsis*/
        span {
          padding: 10px;
          padding-left: 0;
          width: 120px;
          font-size: 14px;
          color: rgb(154, 148, 148);
          white-space: nowrap; /*不换行强制文本在一行显示*/
          overflow: hidden; /*超出盒子宽度部分文字被隐藏*/
          text-overflow: ellipsis; /*当文本溢出包含元素时发生的事情 ellipsis*/
        }
      }
      .music-content {
        margin-top: 10px;
        width: 340px;
        height: 369px;
        overflow: auto;
        P {
          padding: 5px;
        }
        .active {
          font-weight: bold;
          font-size: 20px;
        }
        /*滚动条高宽度*/
        &::-webkit-scrollbar {
          width: 2px;
        }
        /*滚动条滑块*/
        &::-webkit-scrollbar-thumb {
          border-radius: 3px;
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #f6f4f4;
        }
      }
    }
  }
  .comment {
    width: 100%;
    margin: 0 auto;
    padding: 0 20%;
    height: 1000px;
    background-color: #fff;
  }
}
</style>